<style>
    h4.ly-form-view-title {
        font-size: 14px;
        line-height: 16px;
        margin-block-start: 1.33em;
        margin-block-end: 1.33em;
    }

    .ly-form-view {
        padding-left: 30px;
        margin-bottom: 10px;
    }

    .ly-panel-content .ly-form-view{
        padding-left: 0;
    }

    .ly-form-view .ly-info-label {
        line-height: 26px;
    }

    .ly-form-view .ly-info-label-label {
        min-width: 100px;
        display: inline-block;
        color: #909399;
    }

    .ly-form-view-tight .ly-info-label-label {
        min-width: 60px;
        display: inline-block;
        color: #909399;
    }

    .ly-form-view-tight .ly-info-label {
        line-height: 24px;
        font-size: 12px;
    }
    .ly-form-view-vertical .ly-info-label-label{
        display: block;
    }
    .ly-form-view-vertical .ly-info-label-label .ly-info-label-colon{
        display: none;
    }

    .ly-form-view-bold .ly-info-label-label{
        font-weight: bold;
        color: #000;
    }
</style>
<template>
    <div class="ly-form-view" :class="{'ly-form-view-tight':tight,'ly-form-view-vertical':vertical,'ly-form-view-bold':bold}">
        <h4 class="ly-form-view-title">{{title}}</h4>
        <div>
            <slot></slot>
        </div>
    </div>

</template>
<script>
    Rap.define('', '', function () {
        return {
            name: 'ly-form-view',
            props: {
                'title': {
                    default: ''
                },
                'tight': Boolean,
                vertical:Boolean,
                bold:Boolean
            }, watch: {
                value: function (value) {
                }
            }, data: function () {
                return {};
            }, created: function () {
            }, destroyed: function () {

            }, methods: {}
        }
    });
</script>


